<template>
	<view class="job-faris-container">
		<view class="header">
			<view class="image"><image :src="jobFairs.image"></image></view>
			<view class="info">
				<view class="total">
					<view class="">
						<text>{{ companyList.length }}</text>
						企业
					</view>
					<view class="">
						<text>{{ jobList.length }}</text>
						职位
					</view>
				</view>
				<view class="address">
					<view class="wrap">
						<text class="yzb label-icon yzb-shijian"></text>
						<text>{{ jobFairs.startTime }} 至 {{ jobFairs.endTime }}</text>
					</view>
					<view class="wrap">
						<text class="yzb label-icon yzb-location"></text>
						<text>{{ jobFairs.address }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="head">
				<view class="select">
					<uv-tabs
						@click="selectShowType"
						:list="[{ name: '企业' }, { name: '职位' }]"
						:itemStyle="{ height: '88rpx', width: '120rpx' }"
						:activeStyle="{
							color: '#303133',
							fontWeight: 'bold',
							transform: 'scale(1.5)'
						}"
					></uv-tabs>
				</view>
				<div class="search"></div>
			</view>
			<view class="companys" v-show="currentShowType === 0">
				<view class="item" v-for="item in companyList" :key="item.id" @click="toPage(item.id)">
					<view class="logo"><image :src="item.logo" mode=""></image></view>
					<view class="info">
						<view class="name">{{ item.fullName }}</view>
						<view style="color: #606266">{{ item.industryName }} · {{ item.scale }}</view>
					</view>
				</view>
			</view>
			<view class="jobs" v-show="currentShowType === 1"><job-list :list="jobList"></job-list></view>
		</view>
	</view>
</template>

<script>
import { getJobFairsDetail } from '@/apis/job-fairs/index.js';
import JobList from '@/components/JobList.vue';

export default {
	components: { JobList },
	data() {
		return {
			jobFairs: {},
			currentShowType: 0,
			companyList: [],
			jobList: []
		};
	},
	onLoad(option) {
		const { id } = option;
		this.initData(id);
	},
	mounted() {},
	methods: {
		// 选择显示类型
		selectShowType(e) {
			this.currentShowType = e.index;
		},
		async initData(id) {
			const { data } = await getJobFairsDetail(id);
			this.companyList = data.companys.map(item => {
				return {
					id: item.id,
					fullName: item.fullName,
					logo: item.logo,
					scale: item.scale,
					industryName: item.industryName
				};
			});
			this.jobFairs = {
				image: data.image,
				startTime: uni.$uv.timeFormat(data.startTime),
				endTime: uni.$uv.timeFormat(data.endTime),
				address: data.address
			};

			let jobs = [];
			for (const comp of data.companys) {
				for (const job of comp.jobs) {
					const temp = {
						...job,
						user: comp.user,
						company: { name: comp.name, scale: comp.scale, nature: comp.nature }
					};
					jobs.push(temp);
				}
			}
			this.jobList = jobs;
		},
		toPage(id) {
			uni.navigateTo({ url: '/pages/company/index?id=' + id });
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f2f2f2;
}
</style>

<style lang="scss" scoped>
.job-faris-container {
	.select {
		margin: 0 20rpx;
	}
	.header {
		background-color: #fff;
		.image {
			width: 100%;
			height: 350rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.info {
			.total {
				display: flex;
				align-items: center;
				padding: 10rpx 0;
				border: 2rpx solid #ccc;
				> view {
					flex: 1;
					text-align: center;
					padding: 20rpx 0;
					border-right: 2rpx solid #ccc;
					&:last-child {
						border-right: none;
					}
					text {
						font-size: 48rpx;
						font-weight: bold;
						color: $main-color;
					}
				}
			}
			.address {
				padding: 30rpx;
				.wrap {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					font-size: 30rpx;
					.yzb {
						margin-right: 20rpx;
					}
				}
			}
		}
	}

	.content {
		padding-bottom: 10rpx;
		.head {
			margin: 30rpx 0;
		}
		.companys {
			padding: 0 20rpx;
			.item {
				display: flex;
				align-items: center;
				padding: 20rpx;
				margin-bottom: 20rpx;
				border-radius: 16rpx;
				background-color: #fff;
				image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;
				}
				.name {
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 16rpx;
				}
			}
		}
	}
}
</style>
